<style scoped>
    @import '../styles/user.css';

    .page_warp {
        padding-top: 0.38rem;
    }

    .photo-files{
    }
    .uploadImg {
        float: left;
    }
    .uploadImg img {
        border: 1px solid transparent;
        margin: 0.1rem 0 0.1rem 0.2rem;
        width: 0.65rem;
        height: 0.65rem;
        object-fit: contain;
    }
    .photo-file-wrap{
        width: 0.65rem;
        height: 0.65rem;
        float: left;
        border: #b5bbc3 dotted 1px;
        -webkit-border-radius: 0.05rem;
        -moz-border-radius: 0.05rem;
        border-radius: 0.05rem;
        position: relative;
        margin: 0.1rem 0 0.1rem 0.2rem;
    }
    .photo-file{
        width: 100%;
        height: 100%;
        position: relative;
        overflow: hidden;
        -webkit-border-radius: 0.05rem;
        -moz-border-radius: 0.05rem;
        border-radius: 0.05rem;
    }
    .photo-file img{
        width: 100%;
        height: 100%;
        vertical-align: top;
    }
    .photo-file input{
        position: absolute;
        left: 0;
        top: 0;
        opacity: 0;
        height: 100%;
        width: 100%;
    }

    .submit {
        line-height: 0.38rem;
        height: 0.38rem;
        padding: 0 0.1rem;
        background: transparent;
        font-size: 0.16rem;
        color: #222;
        position: fixed;
        top: 0;
        right: 0.1rem;
        z-index: 999;
        -webkit-appearance: none;
        border: none;
        font-family: inherit;
    }

</style>
<template>
    <header-component :page-name="pageName"></header-component>
    <div class="page_warp">
        <form class="m-user" id="shareForm">
            <input type="hidden" name="goodsId" v-model="formData.id">

            <div class="m-user-addrAdd">
                <div class="m-user-bar">
                    <div class="w-inputBar w-bar">
                        <div class="w-bar-control">
                            <input class="w-bar-input" type="text" name="title" placeholder="晒单主题，不少于6个字" v-model="formData.title" required>
                        </div>
                    </div>
                    <div class="w-inputBar w-bar">
                        <div class="w-bar-control">
                            <textarea class="w-bar-input" name="content" placeholder="商品评价超过10个字，有机会获得优惠券哦~" style="height:1.82rem;" v-model="formData.content" required></textarea>
                        </div>
                    </div>
                </div>
            </div>


            <div class="photo-files f-clear" id="photoList">
                <div class="uploadImg">
                    <img :src="img" v-for="img in imageData">
                </div>

                <div class="photo-file-wrap file-normal">
                    <div class="photo-file">
                        <img src="../images/add.png">
                        <input type="file" id="file" accept="image/*" @change="bindFile">
                    </div>
                </div>
            </div>

            <button class="submit" @click.prevent="submit">发布</button>
        </form>

    </div>

    <pop :status-pop="statusPop" :status-toast="statusToast" :delay="delay" :msg="msg">
        <a href="javascript:;" @click="popCancle">取消</a>
        <a href="javascript:;" @click="popSrue">确定</a>
    </pop>
</template>
<script>
    import headerComponent from '../components/header'
    import pop from '../components/pop'
    import User from '../module/user'
    import Request from '../config/request'
//    import Config from '../config/config'

    module.exports = {
        data() {
            return {
                pageName: '晒单',
                statusToast: false,
                statusPop: false,
                delay: 2000,
                msg: '',
                data: {},
                imageData: [],
                files: [],
                formData: {title:'',content:'',goodsId:'',photoList:[]}
            }
        },
        components: {
            headerComponent,
            pop
        },
        created(){
            this.$dispatch('isLoading', true);
        },
        ready() {
            this.formData.goodsId = this.$route.query.id;
            if(this.$route.query.id==undefined) {
                this.statusToast = true;
                this.msg = '参数有误,缺少商品id。';
                setTimeout(function () {
                    history.back()
                },this.delay)
            }
            this.$dispatch('isLoading', false);
        },
        beforeDestroy() {

        },
        methods: {
            bindFile(){
                let _this = this;

                if (this.imageData.length >= 3) {
                    this.statusToast = true;
                    this.msg = '最多传3张图片~';
                    return false;
                }

                this.files = document.getElementById("file").files;
                this.statusToast = true;
                this.msg = '上传中...';

                for(let i = 0; i < this.files.length; i++){
                    let simpleFile = this.files[i];
                    let reader = new FileReader();
                    reader.readAsDataURL(simpleFile);
                    reader.onload = function(){
                        _this.statusToast = true;
                        _this.msg = '上传成功';
                        console.log(this.result)
                        console.log(_this.imageData)
                        _this.imageData.push(this.result);
                        console.log(_this.imageData)
                    }
                }
            },
            submit(){
                if(this.formData.title.length < 6){
                    this.statusToast = true;
                    this.msg = '标题不应少于6个字';
                    return false;
                }

                if(this.imageData.length == 0){
                    this.statusToast = true;
                    this.msg = '请上传至少一张照片';
                    return false;
                }

                if(this.formData.content.length < 10){
                    if(this.formData.content == ''){
                        this.statusToast = true;
                        this.msg = '请输入获奖感言';
                        return false;
                    }
                    else {
                        this.statusPop = true;
                        this.msg = '还差'+(10 - this.formData.content.length)+'个字就有机会获得优惠券啦，是否继续发布？';
                        return false;
                    }
                }
                this.postData();
            },
            async postData(){

                this.formData.photoList= this.imageData;
                this.formData.photoList = JSON.stringify(this.formData.photoList);

                console.warn(this.formData.photoList)
                console.log(this.formData)

                let res = await Request.post(Config.apiDomain + '/Shareorder/setShareOrder?token='+User.token,{data: this.formData});

                if(res.status == 200 && res.data.result){
                    if(res.data.result=='special_goods'){
                        this.statusToast = true;
                        this.msg = '晒单成功';
                        setTimeout(()=>{
                            history.go(-1);
                        },this.delay)
                    }else if(res.data.result=='normal_goods'){

                        this.msg = '晒单成功,获得积分,朋友圈分享中奖商品将再得20积分！';

                        this.statusToast = true;

                        setTimeout(()=>{
                            this.$router.go({path:'/detail',query:{id:this.formData.goodsId}});
                        },this.delay)

                    }
                }else{

                    this.statusToast = true;
                    this.msg = res.msg||'晒单失败，请重试';
                }


            },
            popSrue(){

                console.log('srue')
                this.statusPop = false;
                this.postData();
            },
            popCancle(){
                console.log('cancle')
                this.statusPop = false;
                return false;
            }
        }



    }
</script>
